<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      padding:0;
      margin:0;
    }
    div{
      width:200px;
      height:200px;
      padding:10px;
      border:1px solid red;
      box-sizing: content-box;  /*默认不写就是标准盒模型 */
      
    }
  </style>
</head>
<body>
  <div></div>

  <!-- 
  标签都是一个盒子
  盒子：是由内容(content)+padding+border+margin组成 
  准确来说 ：
  横向方向：width + padding-left + padding-right + border-left + border-right +margin-left + margin-right组成 
  垂直方向：height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom组成 
  
  盒模型有两种模式：
  box-sizing: content-box;标准盒模型
  box-sizing: border-box;怪异盒模型


  标准盒模型：就是内容(content)+padding+border+margin组成(margin可以算、也可以不算) 
  打开浏览器---控制台---选中div  就可以看到 
  元素的width：content(200)+padding-left(10px)+padding-right(10px)+border(2px)==222px
    -->
 
</body>
</html>